@import "~./atlantic/zul/less/_header.less";

.z-chosenbox {
	display: inline-block;
	border: 1px solid @inputBorderColor;
	padding-bottom: @paddingSmall - 1; // minus border
	line-height: normal;
	background: @inputBackground;
	overflow: hidden;

	&-item {
		display: inline-block;
		height: @buttonHeight - @paddingSmall * 2;
		margin: @paddingSmall - 1 0 0 @paddingSmall;
		background: @chosenboxBackground;
		vertical-align: middle;
		position: relative;
		white-space: nowrap;
		cursor: pointer;

		&-content {
			.fontStyle(@contentFontFamily, @fontSizeSmall, @baseFontWeight, @chosenboxColor);
			line-height: @iconHeight - 2;
			padding: 0 @iconWidth 0 @paddingSmall;
		}

		&-focus {}
	}

	&-button {
		.size(@smallIconWidth, @smallIconHeight);
		text-align: center;
		position: absolute;
		right: @paddingSmall;
		top: 50%;
		margin-top: -@smallIconHeight/2;

		&:hover .z-chosenbox-icon {
			color: @chosenboxHoverColor;
			background: @chosenboxHoverBackground;
		}
	}

	&-icon {
		.iconFontStyle(@fontSizeXSmall, @chosenboxColor);
		display: block;
		line-height: @smallIconHeight;
	}

	&-input {
		.fontStyle(@contentFontFamily, @baseFontSize, @baseFontWeight, @baseTextColor);
		.displaySize(inline-block, @buttonWidth, @buttonHeight - @paddingSmall * 2);
		border-width: 0;
		padding: @paddingSmall;
		background: transparent !important;
	}

	&-disabled {
		background: @disabledBackground;
		.opacity(@disabledOpacity);

		.z-chosenbox-item {
			cursor: default;
		}

		.z-chosenbox-item-content {
			padding-right: @paddingSmall;
		}

		.z-chosenbox-button {
			display: none;
		}
	}

	&-textcontent {
		display: none;
	}

	&-popup {
		.fontStyle(@contentFontFamily, @baseFontSize, @baseFontWeight, @baseTextColor);
		display: block;
		border: 1px solid @baseBorderColor;
		background: @baseBackground;
		position: absolute;
		overflow: auto;

		&-hidden {
			display: none;
		}
	}

	&-shadow {}

	&-option {
		display: block;
		padding: @paddingSmall @paddingSize;
		line-height: @buttonHeight - @paddingSmall * 2;
		cursor: pointer;

		&-hover {
			color: @hoverColor;
			background: @hoverBackground;
		}
	}

	&-empty {
		padding: 1px 5px;
		font-style: italic;
		color: @disabledColor;

		&-creatable {
			cursor: pointer;
			background: @hoverBackground;
			color: @hoverColor;
			padding-top: 2px;
		}
	}

	&-create {
		.iconFontStyle(@baseFontSize, @chosenboxCreateColor);
		.displaySize(inline-block, @baseFontSize, @baseFontSize);
		margin-right: @paddingSmall;
		line-height: normal;
		background: @baseBackground;
		text-align: center;
	}
}
